<template>
  <el-descriptions
    class="margin-top"
    :column="3"
    border
  >
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          用户
        </div>
      </template>
      {{ form.id }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          当前位置
        </div>
      </template>
      {{ where }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          本车排队号码
        </div>
      </template>
      {{ lineNumber }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          充电模式
        </div>
      </template>
      {{ mode }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          前车数量
        </div>
      </template>
      {{ frontCars }}
    </el-descriptions-item>
  </el-descriptions>
</template>

<script>
import axios from 'axios';
import Global from './Global.vue';

export default {
  name: 'LineInfo',
  data() {
    return {
      form: {
        id: Global.id,
      },
      station_id: Global.station_id,
      mode: Global.mode,
      lineNumber: '',
      frontCars: '',
      where: '',
    };
  },
  mounted() {
    this.showInfo();
  },
  methods: {
    showInfo() {
      const path = '/api/get_where';
      const path1 = '/api/get_wait_label';
      axios.post(path, this.form)
        .then((res) => {
          if (res.data.where === 'wait') {
            this.where = '等待区';
            Global.where = '等待区';
          } else if (res.data.where === 'charge') {
            this.where = '充电区';
            Global.where = '充电区';
            this.frontCars = 0;
          } else if (res.data.where === 'exit') {
            this.where = '不在服务区';
            Global.where = '不在服务区';
          }
        })
        .catch((error) => {
          // eslint-disable-next-line
          console.error(error);
        });
      axios.post(path1, this.form)
        .then((res) => {
          if (res.data.ok) {
            this.lineNumber = res.data.label;
          } else {
            this.lineNumber = '不在等候区';
          }
        })
        .catch((error) => {
          // eslint-disable-next-line
          console.error(error);
        });
    },
  },
};
</script>

<style scoped>

.cell-item {
  display: flex;
  align-items: center;
}

.margin-top {
  margin-top: 50px;
}
</style>
